/*
 * @Author: your name
 * @Date: 2021-12-17 14:08:45
 * @LastEditTime: 2021-12-17 14:16:09
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \first_one_file\react-travel\src\components\businessPartners\BusinessPartners.tsx
 */
import React from 'react';
import {
  Row,
  Col,
  Typography,
  Divider
} from 'antd';
import styles from './BusinessPartners.modules.css';

import image1 from '../../assets/images/microsoft-80658_640.png';
import image2 from '../../assets/images/icon-720944_640.png';
import image3 from '../../assets/images/follow-826033_640.png';
import image4 from '../../assets/images/facebook-807588_640.png';

const companies = [
  { src: image1, title: "Microsoft"},
  { src: image2, title: "Youtube"},
  { src: image3, title: "Ins"},
  { src: image4, title: "Facebook"}
]

export const BusinessPartners: React.FC = (props) => {
  return (
    <div className={styles.content}>
      <Divider orientation="left">
        <Typography.Title level={3}>合作企业</Typography.Title>
      </Divider>
      <Row>
        {companies.map((c, index) => (
          <Col span={6} key={"bussiness-partner-" + index}>
            <img 
              alt="bussiness-partner"
              src={c.src}
              style={{
                width: "80%",
                display: "block",
                marginLeft: "auto",
                marginRight: "auto"
              }}
             />
          </Col>
        ))}
      </Row>
    </div>
  )
}